昨天我們介紹了這個專案和他所使用的技術
今天我們接著來看 Folder Structure

根目錄

首先我們看到根目錄

在根目錄我們可以看到一些設定檔

.env

在這個專案中，分為了三個環境

• development
• staging
• production
  分別代表開發、測試、正式
  根據不同的環境，對應到不同的環境檔

在正式開發中往往有可能會遇到正式環境出了問題
這時候有 Staging，能夠快速地把正式環境的問題
鏡向的呈現在 Staging 中，找出問題所在

在環境檔中放著 API 和 GraphQL 的 endpoint
AWS 靜態檔案的位置
以及系統預設的貨幣

Prettier

在多人協作開發上，我們很常遇到大家的寫作風格不一致
這時候我們需要一個方式，統一大家的寫作方式
Prettier 是一個很好規範大家撰寫時的程式碼風格
且可以根據團隊的需求。去自行定義

module.exports = {
  trailingComma: 'all', // 在所有 Array 和 Object 尾端加入逗號
  tabWidth: 2, // tab 長度為 2
  semi: false, // 結束不加分號
  singleQuote: true, // 使用單引號
  printWidth: 120, // 行寬
  arrowParens: 'avoid', // 箭頭函數只有一個參數時，省略括號
}

config-overrides

此專案是由create-react-app(CRA)之上所構成
倘若需要進行改寫，會需要一點功夫
所以專案透過 react-app-rewired 套件去針對 CRA 的設定去做改寫

manageTranslations

裡面設定了包括翻譯檔的位置以及支持哪些語言
後續會再補充有關 locales 部分

tsconfig

{
  "compilerOptions": {
    "target": "es5", // 輸出版本
    "lib": ["dom", "dom.iterable", "esnext", "esnext.intl", "es2017.intl", "es2018.intl"], // 需要引入的函式庫檔案
    "allowJs": true, // 允許JS
    "skipLibCheck": true, // 不檢查附檔名為.d.ts
    "esModuleInterop": true, // 兼容 CommonJS module 引入，符合 ES6 module 規範
    "allowSyntheticDefaultImports": true,
    "strict": true, // 使用嚴格模式  
    "forceConsistentCasingInFileNames": true, // 確保檔案的大小寫一致
    "module": "esnext", // 指定生成哪種模組
    "moduleResolution": "node", // 選擇模組解析策略
    "resolveJsonModule": true, // 允許在導入 JSON 檔
    "isolatedModules": true, // 將每個文件做為單獨的module
    "noEmit": true, // 不產生輸出檔案
    "jsx": "react-jsx", // 支援.tsx檔名的特定JSX檔案
    "noFallthroughCasesInSwitch": true // 報告 switch 語句的 fallthrough 錯誤
  },
  "include": ["src"] // 編譯時包含哪些檔案或資料夾
}

明天我們接著看 src 的部分

參考文章

導入 Prettier
【Day 03】 TypeScript 編譯設定 - tsconfig.json
Day04:【TypeScript 學起來】tsconfig.json 有哪些可以設定